<template>
    <f7-page>
        <f7-navbar>
            <div  @click="$f7router.back()">
                <f7-nav-left >
                    <f7-icon f7="chevron_left"></f7-icon>
                    <span class="Back">返回</span>
                </f7-nav-left>
            </div>
            企业主页
            <f7-nav-right><f7-link href="/mine/businessSetting/">设置</f7-link><f7-link>分享</f7-link></f7-nav-right>
        </f7-navbar>

          <div class="text-align-center" >
            <div class="bg-comhomepage text-align-center">
                <div class="bg-comhomepage-cover">
                    <img  class="companyhome-icon gap-40" src="../../assets/img/infor-face.png" >
                    <h2 class="text-white gap-10 bold ng-binding" v-if="getBsCardDlt.company">
                      {{getBsCardDlt.company.nick_name}}
                    </h2>
                </div>
            </div>
            <div class="bg-companynpage">
              <div class="row row-homepage text-align-center text-gray gap-10" >
                    <div class="col text-orange active">
                        <h4 class="">企业</h4>
                        <h4 class="gap-5">主页</h4>
                    </div>

                    <div class="col" v-if="getBsCardDlt.count">
                        <h4>物流抢单</h4>
                        <h4 class="gap-5 ng-binding">{{getBsCardDlt.count.traffic_driver_demand}}</h4>
                    </div>

                    <div class="col" v-if="getBsCardDlt.count">
                        <h4>物流线路</h4>
                        <h4 class="gap-5 ng-binding">{{getBsCardDlt.count.traffic_line}}</h4>
                    </div>

                </div>
            </div>
        </div>


           <div class="gap-row">
            <div class="list-inset">
             <h4 class="text-gray1 gap-10 line-height" >
                <span class="bold">经营范围:</span> 运输:
                 <span v-for="item in getBsCardDlt.transport" class="distance">{{item}}</span>
                </h4>
                <h4 class="text-gray1 line-height gap-5 ng-binding" v-if="getBsCardDlt.company"><span class="bold">企业介绍:</span>{{getBsCardDlt.company.des}}</h4>
                <h4 class="text-gray1 gap-5 ng-binding" v-if="getBsCardDlt.company"><span class="bold">所在地区:</span>  {{getBsCardDlt.company.province}}&nbsp; {{getBsCardDlt.company.city}}&nbsp;{{getBsCardDlt.company.district}}</h4>
            </div>
        </div>

            <!--<f7-block class="text-align-center">
                                <span class="order-title">2018年07月04日</span>
            </f7-block>-->


     <f7-card v-for="item in getBsLists" v-if="item.list.dt_type==='traffic_line'">
            <f7-card-header>
                <div class="text-left">
                    <img src='../../assets/img/line-icon.png' class="line-icon">
                    <div class="pull-left">
                        <b>{{item.list.start_province}}</b>
                        <span v-for="item1 in item.list.start_city">{{item1}}</span>

                    </div>
                </div>
                <div class="text-center">
                    <h5 class="text-orange The_of">去程：￥{{item.list.money}}元/吨</h5>
                    <h5 class="text-orange status-bg The_of">回：￥{{item.list.unmoney}}元/吨</h5>

                </div>
                <div class="text-right">
                    <div class="pull-right">
                        <b> {{item.list.end_province}}</b>
                        <span v-for="item1 in item.list.end_city">{{item1}}</span>
                    </div>
                </div>
            </f7-card-header>
        </f7-card>

            <!-- <f7-block class="text-align-center">
                                <span class="order-title">2018年07月04日</span>
            </f7-block>-->
        <f7-card v-for="item in getBsLists" v-if="item.list.dt_type==='traffic_driver_demand'">
            <f7-link><!--@click="$f7router.navigate('/pass/passAppointDtl/'+getBsLists.user_id)"-->
                <div>
                    <f7-card-header>
                        <div class="text-left">
                            <img src='../../assets/img/line-icon.png' class="line-icon">
                            <div class="pull-left">
                                <b>{{item.list.send_city}}</b>
                                <span>{{item.list.send_district}}</span>

                            </div>
                        </div>
                        <div class="text-center">
                            <h5 class="text-orange The_of"> {{item.list.amount}}吨{{item.list.category_chn}}</h5>
                            <h5 class="text-orange status-bg The_of">￥{{item.list.price}}元/吨</h5>

                        </div>
                        <div class="text-right">
                            <div class="pull-right">
                                <b>{{item.list.receive_province}}</b>
                                <span>{{item.list.receive_city}}</span>
                            </div>
                        </div>
                    </f7-card-header>
                    <h5 class="text-red  binding">
                        车辆：待接单1，待派货0，运输中0，已运完0
                    </h5>
                </div>
            </f7-link>
        </f7-card>
    </f7-page>
</template>

<script>
    import F7Page from "framework7-vue/src/components/page";
    import F7Link from "framework7-vue/src/components/link";
    export default {
        name: "businessCard",
        components: {F7Link, F7Page},
        data(){
            return{
                getBsCardDlt:'',
                getBsLists:''
            }
        },
        methods:{
            async getBsCardDlts () {
                let param = {company_id: this.routerParams.businessid}
                this.getBsCardDlt = (await this.AccountService.getBsCardDlt(param)).data.data
            },
            async getBsCardDlist () {
                let param = {company_id: this.routerParams.businessid,page: 1, type: "traffic_all"}
                this.getBsLists = (await this.OtherService.getBsList(param)).data.data.list
            }
        },
        mounted(){
            this.getBsCardDlts()
            this.getBsCardDlist()
        }
    }
</script>

<style scoped>

    /* 卡片css  */
    .card-header {
    padding: 15px 15px 5px 15px !important;
    position: static;
}
.binding{
     padding: 5px 15px;
}
    .text-left {
        position: relative;
    }

    .line-icon {
          position: absolute;
        left: -3px;
        width: 16px;
        height: 45px;
        top: -4px;
    }
   .ios .link {
    display: inline;
}
    .status-bg {
        background: url('../../assets/img/route-bg.png') no-repeat top center;
        background-size: 95px 4px;
        padding-top: 7px;
        width: 97px;
    }
    .The_of{
        text-align: center;
    }
    .pull-left {
        text-align: left;
        margin-left: 20px;
    }

    .pull-right {
        text-align: right;
    }

    .pull-left span {
        font-size: 12px;
        color: #666;
        display: block;
    }

    .pull-left b {
        font-size: 14px;
        color: #000;
        display: block;
    }

    .pull-right span {
        font-size: 12px;
        color: #666;
        display: block;
        width: 48px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }

    .pull-right b {
        font-size: 14px;
        color: #000;
        display: block;
    }
    .text-right span {
        margin: 0 0 3px 0;
        font-size: 10px;
        color: #666;
    }
    .text-red {
    color: #DB4226;
      font-size: 12px;
}
.text-orange {
    color: #FF6C00;
      font-size: 12px;
}


.ios .page {
    background: #f5f5f5;
  }
.bg-comhomepage {
    background:  url('../../assets/img/bg-comhomepage.jpg') no-repeat center center;
    background-size: cover;
}
.bg-comhomepage-cover {
    background: rgba(0, 0, 0, 0.1);
    height: 250px;
}
.companyhome-icon {
    border: 2px solid #fff;
    border-radius: 100%;
    width: 100px;
    height: 100px;
}
.gap-40 {
    margin-top: 40px;
}
.text-white {
    color: #fff;
}
.gap-10 {
    margin-top: 10px;
}
.bold {
    font-weight: bold;
}
.text-gray {
    color: #999;
}
.text-orange {
    color: #FF6C00;
}
.row-homepage .col.active h4 {
    color: #E45102;
    font-weight: bold;
    font-size: 14px;
}
.gap-5 {
    margin-top: 5px;
}
.gap-row {
    padding: 10px 0;
}
.list-inset {
    background: transparent;
    margin: 0 15px;
}
.text-gray1 {
    color: #666;
}
.distance{
    margin: 0px 4px;
}
.order-title {
    padding: 2px 10px;
    border-radius: 5px;
    display: inline-block;
    font-size: 11px;
    color: #666;
}
</style>
